<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

<div id="app">
    username: <input type="text" v-model="user.username"> <br>
    password: <input type="password" v-model="user.password"> <br>
    gender: <input type="radio" name="gender" value="man" v-model="user.gender"> 男
    <input type="radio" name="gender" value="women" v-model="user.gender"> 女<br>

    <input type="button" value="提交" @click="send">
    <input type="button" value="提交2" @click="send2">

    <br>
    {{msg}}
</div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{
            user: {
                username: "",
                password: "",
                gender: "women"
            },
            msg:""
        },
        methods:{
            send(){
                //post请求 (可以在请求行携带，也可以在请求体携带)
                axios.post("/user/post1?" + `username=${this.user.username}&password=${this.user.password}&gender=${this.user.gender}`)
                    .then(resp=>{
                        let r = resp.data;
                        //alert(r.data)
                        this.msg = r.data;
                    })
            },
            send2(){
                //post请求 (可以在请求行携带，也可以在请求体携带)
                //这种写法在携带数据时，是通过请求体，并且数据的格式是json字符串格式
                axios.post("/user/post2?pwd=123",this.user)
                    .then(resp=>{
                        let r = resp.data;
                        //alert(r.data)
                        this.msg = r.data;
                    })
            }
        }
    });
</script>

</html>